<!DOCTYPE html>
<html lang="en">

<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" type="text/css" href="css/chat.css" />
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="js/jquery-3.4.1.js"></script>
<script>
    var ws;
    $(function () {
    //    模拟用户名
        var username="小明";

    if("WebSocket" in window) {

        // 打开一个 web socket
       ws = new WebSocket("ws://localhost:8080/websocket/"+username);

        ws.options = {
            closeButton: true,
            debug: true,
            progressBar: true,
            positionClass: "toast-bottom-right",
            onclick: null,
            showDuration: "3000",
            hideDuration: "1000",
            timeOut: "2000",
            extendedTimeOut: "5000",
            showEasing: "swing",
            hideEasing: "linear",
            showMethod: "fadeIn",
            hideMethod: "fadeOut"
        };

        ws.onopen = function(evt) {
            console.log("Connection open ...");
           // ws.send("Hello WebSockets!");
        };


        ws.onmessage = function(evt) {
            var msg = JSON.parse(evt.data);

          if (msg.username==='小明')
          {
              var div=$("<div class=\"item right\">\n" +
                  "        <img class=\"header-img\" src=\"imgs/title.jpg\" />\n" +
                  "        <span class=\"message\">"+msg.msg+"</span>\n" +
                  "    </div>");
              $(".box").append(div);
          }
          else {
              var div=$("<div class=\"item left\">\n" +
                  "        <img class=\"header-img\" src=\"imgs/title.jpg\" />\n" +
                  "        <span class=\"message\">"+msg.msg+"</span>\n" +
                  "    </div>");
              $(".box").append(div);
          }
           // ws.send(received_msg);


        };

        ws.onerror = function(event) {
            toastr.error('链接错误');
        };

        ws.onclose = function() {
            // 关闭 websocket
            toastr.error('链接关闭');
        };
    } else {
        // 浏览器不支持 WebSocket
        alert("您的浏览器不支持 WebSocket!");
    }
})
function f() {
    ws.send($("#write").val());
    $("#write").val("")
}
</script>


<body>

<div class="box">
<!--    <div class="item left">-->
<!--        <img class="header-img" src="imgs/title.jpg" />-->
<!--        <span class="message">爱你呦</span>-->
<!--    </div>-->
<!--    <div class="chart-timer">-->
<!--        2019-5-17-->
<!--    </div>-->
<!--    <div class="item right">-->
<!--        <img class="header-img" src="imgs/title.jpg" />-->
<!--        <span class="message">哈哈哈哈哈</span>-->
<!--    </div>-->
<!--    <div class="item left">-->
<!--        <img class="header-img" src="imgs/title.jpg" />-->
<!--        <span class="message">干嘛呢</span>-->
<!--    </div>-->

<!--    <div class="item right">-->
<!--        <img class="header-img" src="imgs/title.jpg" />-->
<!--        <span class="message">吃饭饭</span>-->
<!--    </div>-->
</div>

<div class="input-box">
    <input type="text" id="write" style="height: 50px"/>
    <button onclick="f()">确定</button>
</div>

</body>
</html>